<template>
    <div class="box">
        <ul>
            <li v-for="(item,index) in writing" style="margin-top: 10px">
                置顶文字{{index+1}}：<input type="text" :value="item" @input="edit($event,index)">
            </li>
        </ul>
        <button @click="writing_home">保存</button>
    </div>
</template>

<script>
import api from "@/api";

export default {
    name: "ToppingText",
    props:['name_'],
    data(){
        return{
            writing:"",
            _name:"",
        }
    },
    watch:{
        writing(newValue,oldValue){
            this.writing=newValue;
        }
    },
    created() {
        let writing;
        setTimeout(()=>{
            writing = JSON.parse(window.localStorage.getItem("DataContent"));
            this._name = this.name_;
            if(writing){
                for(let i=0;writing.length;i++){
                    if(writing[i].options ===  this._name){
                        this.writing = writing[i].content.split("|||||");
                        return;
                    }
                }
            }
        },200)
    },
    methods:{
        edit(event,index){
            this.writing[index] = event.target.value;
        },
        writing_home(){
            let writing = this.writing[0]+"|||||"+this.writing[1];
            api.updateAdminWeb({content:writing,options: this._name}).then((res)=>{
                console.log(res.data)
                this.$store.commit("requestInfo", res.data.msg);
                if(res.data.code===200){
                    api.getAdminWeb().then((res)=>{
                        if(res.data.code === 200){
                            window.localStorage.setItem("DataContent",JSON.stringify(res.data.data))
                        }
                    })
                }
            })
        }

    }
}
</script>

<style scoped>
.box{
    margin-bottom: 15px;
    background: white;
    padding: 15px;
}
.box ul{
    list-style: none;
    padding-left: 0;
}
input{
    outline: none;
    width: 300px;
    height: 30px;
}
button{
    padding: 7px 15px;
    outline: none;
    background: #3586f1;
    border: 0;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    z-index: 9;
    margin-top: 10px;
}
button:hover{
    opacity: .9;
}
</style>